<template>
<!--个人空间-->
<div id="user_home">
  <!--背景图片及头像-->
  <div id="bg">

  </div>
  <!--导航栏-->
  <div id="ng">
    <div class="ng_left">
      <Menu mode="horizontal" active-name="1" @on-select="select">
        <MenuItem name="upload">投稿</MenuItem>
        <MenuItem name="dongtai">动态</MenuItem>
        <MenuItem name="collect">收藏</MenuItem>
        <MenuItem name="subscribe">订阅</MenuItem>
        <MenuItem name="setting">设置</MenuItem>
        <MenuItem name="praise">点赞</MenuItem>
      </Menu>
    </div>
    <div class="ng_right">
<!--      <Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="select">-->
<!--        <MenuItem>关注</MenuItem>-->
<!--        <MenuItem>粉丝</MenuItem>-->
<!--        <MenuItem>点赞</MenuItem>-->
<!--        <MenuItem>收藏</MenuItem>-->
<!--        <MenuItem>阅读</MenuItem>-->
<!--      </Menu>-->
    </div>

  </div>
  <!--导航栏内容-->
  <div>
    <router-view/>
  </div>
</div>
</template>

<script>
export default {
  name: "User_home",
  methods:{
    select(name){
      this.$router.push({
        path:'/bingo/User_home/'+name
      })
    }

  },

}
</script>

<style scoped>

#user_home{
  display:flex;
  flex-direction:column;
  width:80%;
  position:relative;
  left:10%;
  right:10%;

}

#bg{
  width:100%;
  height:200px;
  background-image: url("../../assets/images/person-center-background.jpeg");
  background-size: cover;
}

#ng{
  width:100%;
  height:75px;
  line-height:75px;
  display:flex;
  flex-direction:row;
  background-color: aliceblue;
  align-items:center;
}

.ng_left{
  width:70%;
}

.ng_right{
  width:30%;
}

</style>
